"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateSymbolContnt = exports.generateSvgsHtmlContent = exports.generateSvgContent = exports.generateIconfontContent = exports.generateHtmlContent = exports.generateLessContent = exports.generateClazzTsxContent = exports.generateFunTsxContent = void 0;
// 模版生成React 函数组件 tsx文件内容
function generateFunTsxContent(idList) {
    return `import React, { CSSProperties } from "react";
      import "./index.less";
      
      export type IconType = ${idList
        .reduce((p, c) => `${p}|"${c}"`, "")
        .substring(1)}
      
      export interface IconProps {
        type: IconType;
        color?: string;
        className?: string;
        style?: CSSProperties;
        size?: string;
        [key: string]: any;
      }
      const Icon: React.FC<IconProps> = function ({
        type,
        color,
        style,
        className = "",
        size = "default",
        ...restProps
      }) {
        return (
          <span className={"bdpicon bdpicon-" + size + " " + className}>
            <svg
              aria-hidden="true"
              {...restProps}
              style={{ color, ...(style || {}) }}
            >
              <use xlinkHref={"#" + type} />
            </svg>
          </span>
        );
      };
      
      export default Icon;
       `;
}
exports.generateFunTsxContent = generateFunTsxContent;
// 模版生成React class组件 tsx文件内容
function generateClazzTsxContent(idList) {
    return `import React, { CSSProperties, PureComponent } from "react";
      import "./index.less";
      
      export type IconType = ${idList
        .reduce((p, c) => `${p}|"${c}"`, "")
        .substring(1)}
      
      export interface IconProps {
        type: IconType;
        color?: string;
        className?: string;
        style?: CSSProperties;
        size?: string;
        [key: string]: any;
      }
      class Icon extends PureComponent<IconProps> {
        render() {
          const {
            type,
            color,
            style,
            className = "",
            size = "default",
            ...restProps
          } = this.props;
          return (
            <span className={"bdpicon bdpicon-" + size + " " + className}>
              <svg
                aria-hidden="true"
                {...restProps}
                style={{ color, ...(style || {}) }}
              >
                <use xlinkHref={"#" + type} />
              </svg>
            </span>
          );
        }
      }
      
      export default Icon;
      `;
}
exports.generateClazzTsxContent = generateClazzTsxContent;
// 模版生成less文件内容
function generateLessContent() {
    return `
      .bdpicon {
        fill: currentColor;
        vertical-align: middle;
        display: inline-block;
        &.bdpicon-default {
          width: 1em;
          height: 1em;
          line-height: 1em;
          svg {
            width: 1em;
            height: 1em;
          }
        }
        &.bdpicon-small {
          width: 0.6em;
          height: 0.6em;
          line-height: 0.6em;
          svg {
            width: 0.6em;
            height: 0.6em;
          }
        }
        &.bdpicon-large {
          width: 1.5em;
          height: 1.5em;
          line-height: 1.5em;
          svg {
            width: 1.5em;
            height: 1.5em;
          }
        }
      }
      `;
}
exports.generateLessContent = generateLessContent;
// 模版生成html文件
function generateHtmlContent(idList) {
    return `<!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>ra-symbol-iconfont</title>
          <script src="./iconfont.js"></script>
          <style>
            *{
              padding:0;
              margin:0;
              box-sizing:border-box;
            }
            #ra-content{
              display:flex;
              padding:30px;
              flex-wrap:wrap;
            }
            .svg-item{
              width:100px;
              height:60px;
              display:flex;
              flex-direction:column;
              align-items:center;
              border:1px solid #ccc;
              transition:all .3s linear;
              position:relative;
              overflow:hidden;
              margin:5px;
            }
            .svg-item:hover{
              box-shadow:0 0 5px #aaa;
              cursor:pointer;
            }
            .svg-item>svg{
              font-size:40px;
              width:1em;
              height:1em;
            }
            .svg-item h3{
              width: 100%;
              font-size: 12px;
              font-weight: 400;
              text-align: center;
              border-top: 1px solid #ccc;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              padding: 5px 10px;
            }
            .svg-item .item-mask{
              width:100%;
              height:100%;
              position:absolute;
              left:0;
              top:100%;
              display:flex;
              align-items:center;
              justify-content:center;
              flex-direction:column;
              font-size:14px;
              background:rgba(0,0,0,0.8);
              color:#fff;
              opacity:0;
              transition:all .3s linear;
            }
            .svg-item:hover .item-mask{
              top:0;
              opacity:1;
            }
            .item-mask div{
              width:100%;
              height:20px;
              position:relative;
              flex:1;
              margin-top:5px;
            }
            .item-mask .item-id{
              flex-shrink:0;
              line-height:1.45;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              padding: 2px;
              text-align:center;
            }
            .svg-item .item-mask span {
              position:absolute;
              width:100%;
              height:100%;
              left:0;
              top:0;
              transition:all .3s linear;
              display:flex;
              align-items:center;
              justify-content:center;
            }
            .svg-item.active .mask-code{
              opacity:0;
            }
            .svg-item.active .mask-success{
              opacity:1;
              color:#0da534;
            }
            .item-mask .mask-code{
              opacity:1;
            }
            .item-mask .mask-success{
              opacity:0;
            }
          </style>
        </head>
        <body>
        <div id="ra-content">
          ${idList
        .map((id) => `<div class="svg-item" id="${id}">
              <svg>
                <use xlink:href="#${id}"></use>
              </svg>
              <h3>${id}</h3>
             <div class="item-mask">
              <div class="item-id">${id}</div>
              <div>
                <span class="mask-code">复制代码</span>
                <span class="mask-success">复制成功</span>
              </div>
             </div>
          </div>`)
        .join("")}
        </div>
        <script>
          function getParentNode(node){
            if(node.parentNode.className.indexOf('svg-item') !== -1){
              return node.parentNode;
            } 
            return getParentNode(node.parentNode);
          };
            // 事件代理
            var wrapper = document.getElementById('ra-content');
            wrapper.addEventListener('click',(e) => {
              var svgItem = getParentNode(e.target);
              if(svgItem){
                var clazz = svgItem.className;
                svgItem.className = clazz+" active";
                if(navigator.clipboard){
                  navigator.clipboard.writeText(svgItem.id);
                } else {
                  // 兼容低版本浏览器
                  copy(svgItem.id);
                }
                setTimeout(() => {
                  svgItem.className = "svg-item";
                },1000)
              }
            })
  
            function copy (text) {
              const el = document.createElement('input')
              el.setAttribute('value', text)
              document.body.appendChild(el)
              el.select()
              document.execCommand('copy')
              document.body.removeChild(el)
            }
        </script>
        </body>
      </html>
      `;
}
exports.generateHtmlContent = generateHtmlContent;
// 模版生成iconfont.js文件内容
function generateIconfontContent(symbols, svgId) {
    return `
        (function (W) {
          W.addEventListener("load", cb);
          function cb() {
            if (!W.__ra_symbol_iconfont_) W.__ra_symbol_iconfont_ = {};
            if (W.__ra_symbol_iconfont_["${svgId}"]) return;
            W.__ra_symbol_iconfont_["${svgId}"] = true;
            var s =
              '<svg style="display:none" id="${svgId}">${symbols}</svg>',
             d = document.createElement("div");
            d.innerHTML = s;
            var n = d.firstChild;
            var fc = document.body.firstChild;
            n ? i(n, fc) : document.body.appendChild(n);
            function i(a, l) {
              l.parentNode.insertBefore(a, l);
            }
            W.removeEventListener("load", cb);
          }
        })(window);
      `;
}
exports.generateIconfontContent = generateIconfontContent;
// 模版生成svg文件
function generateSvgContent(svgContnt, viewBox) {
    return `<?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="200px" height="200px" viewBox="${viewBox}" version="1.1" xmlns="http://www.w3.org/2000/svg">
        ${svgContnt}
    </svg>
    `;
}
exports.generateSvgContent = generateSvgContent;
// 模版生成直接引用svg的html文件
function generateSvgsHtmlContent(idList) {
    return `<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>ra-symbol-iconfont</title>
            <style>
              *{
                padding:0;
                margin:0;
                box-sizing:border-box;
              }
              #ra-content{
                display:flex;
                padding:30px;
                flex-wrap:wrap;
              }
              .svg-item{
                width:100px;
                height:60px;
                display:flex;
                flex-direction:column;
                align-items:center;
                border:1px solid #ccc;
                transition:all .3s linear;
                position:relative;
                overflow:hidden;
                margin:5px;
              }
              .svg-item:hover{
                box-shadow:0 0 5px #aaa;
                cursor:pointer;
              }
              .svg-item>img{
                font-size:30px;
                width:1em;
                height:1em;
              }
              .svg-item h3{
                width: 100%;
                font-size: 12px;
                font-weight: 400;
                text-align: center;
                border-top: 1px solid #ccc;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                padding: 5px 10px;
              }
              .svg-item .item-mask{
                width:100%;
                height:100%;
                position:absolute;
                left:0;
                top:100%;
                display:flex;
                align-items:center;
                justify-content:center;
                flex-direction:column;
                font-size:14px;
                background:rgba(0,0,0,0.8);
                color:#fff;
                opacity:0;
                transition:all .3s linear;
              }
              .svg-item:hover .item-mask{
                top:0;
                opacity:1;
              }
              .item-mask div{
                width:100%;
                height:20px;
                position:relative;
                flex:1;
                margin-top:5px;
              }
              .item-mask .item-id{
                flex-shrink:0;
                line-height:1.45;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                padding: 2px;
                text-align:center;
              }
              .svg-item .item-mask span {
                position:absolute;
                width:100%;
                height:100%;
                left:0;
                top:0;
                transition:all .3s linear;
                display:flex;
                align-items:center;
                justify-content:center;
              }
              .svg-item.active .mask-code{
                opacity:0;
              }
              .svg-item.active .mask-success{
                opacity:1;
                color:#0da534;
              }
              .item-mask .mask-code{
                opacity:1;
              }
              .item-mask .mask-success{
                opacity:0;
              }
            </style>
          </head>
          <body>
          <div id="ra-content">
            ${idList
        .map((id) => `<div class="svg-item" id="${id}">
                <img width="60" height="60" src="./${id}.svg" alt="${id}" />
                <h3>${id}</h3>
               <div class="item-mask">
                <div class="item-id">${id}</div>
                <div>
                  <span class="mask-code">复制代码</span>
                  <span class="mask-success">复制成功</span>
                </div>
               </div>
            </div>`)
        .join("")}
          </div>
          <script>
            function getParentNode(node){
              if(node.parentNode.className.indexOf('svg-item') !== -1){
                return node.parentNode;
              } 
              return getParentNode(node.parentNode);
            };
              // 事件代理
              var wrapper = document.getElementById('ra-content');
              wrapper.addEventListener('click',(e) => {
                var svgItem = getParentNode(e.target);
                if(svgItem){
                  var clazz = svgItem.className;
                  svgItem.className = clazz+" active";
                  if(navigator.clipboard){
                    navigator.clipboard.writeText(svgItem.id);
                  } else {
                    // 兼容低版本浏览器
                    copy(svgItem.id);
                  }
                  setTimeout(() => {
                    svgItem.className = "svg-item";
                  },1000)
                }
              })
    
              function copy (text) {
                const el = document.createElement('input')
                el.setAttribute('value', text)
                document.body.appendChild(el)
                el.select()
                document.execCommand('copy')
                document.body.removeChild(el)
              }
          </script>
          </body>
        </html>
        `;
}
exports.generateSvgsHtmlContent = generateSvgsHtmlContent;
// 模版生成symbol字符串
function generateSymbolContnt(option) {
    const { name, viewBox, content } = option;
    return `<symbol id="${name}" viewBox="${viewBox}">${content}</symbol>`;
}
exports.generateSymbolContnt = generateSymbolContnt;
